<template>
  <div class="Newsupply">
    <div class="detPgHeader">
      <div class="detPgHeaderleft">
        <span class="side_1"></span>
        <span class="add_1">{{ title }}</span>
      </div>
      <el-button type="info" icon="el-icon-back" onclick="window.history.go(-1)">返回</el-button>
    </div>
    <div class="herd_tow_brgs">
      <div class="herd_tow_bt">基本信息</div>
      <el-form :model="from_KUCUN" :inline="true" class="demo-form-inline"
               label-width="120px">
        <el-form-item label="产品名称">
          <el-input disabled v-model="from_KUCUN.productName"></el-input>
        </el-form-item>
        <el-form-item label="成品图号">
          <el-input disabled v-model="from_KUCUN.productNumber"></el-input>
        </el-form-item>
        <el-form-item label="当前库存">
          <el-input disabled v-if="type==1" v-bind:value="from_KUCUN.chengpinNumber|groupTypeNULLTrans"></el-input>
          <el-input disabled v-else-if="type==2" v-bind:value="from_KUCUN.feipinNumber|groupTypeNULLTrans"></el-input>
        </el-form-item>
        <el-form-item label="库存状态">
          <el-input disabled v-model="kuCunStatue"/>
        </el-form-item>
        <el-form-item label="库存区间">
          <el-input disabled v-bind:value="from_KUCUN.kucunXiaXian|groupTypeNULLTrans" style="width: 80px"></el-input>
          <div style="display: inline-block;width:20PX;height:1px;background: black"/>
          <el-input disabled v-bind:value="from_KUCUN.kucunShangXian|groupTypeNULLTrans" style="width: 80px"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="herd_tow_brgs" style="width: 40%">
      <div class="herd_tow_bt">入库记录</div>
      <el-table
        :data="table_RUKURECODE"
        style="width: 100%;height: 400px"
        :max-height="400">
        <el-table-column
          type="index"
          label="序号"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="rukuTime"
          label="入库时间"
          align="center">
          <template v-slot="scope">
            {{renderTime(scope.row.operationTime)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="number"
          label="入库数量"
          align="center">
        </el-table-column>
      </el-table>
    </div>
    <div class="Btn">
      <!--  ==============  确认  =============== 返回  =============== -->
      <div class="Botm_PtnRpo">
        <el-button class="bm_btn" onclick="window.history.go(-1)" type="info">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "ProductDetail",
  components: {},
  data() {
    return {
      title: "",
      id: 0,
      type: 0,
      kuCunStatue: "",//库存状态
      /*=====================FROM 数据==================================*/
      from_KUCUN: {},
      /*======================table 数据=========================================*/
      table_RUKURECODE:[]
    };
  },
//监听属性 类似于data概念",
  computed: {},
//监控data中的数据变化",
  watch: {},
//方法集合",
  methods: {
    //格式化时间
    renderTime(date) {
      const dateee = new Date(date).toJSON();
      if (date == null) {
        return "---";
      } else {
        return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
      }
    },
    getData(id, type) {
      axios.get("/JX_java/warehouse/getProductDetails?productId=" + id).then(res => {
        console.log(res.data.data)
        this.from_KUCUN = res.data.data
        if (this.from_KUCUN.kucunXiaXian <= this.from_KUCUN.chengpinNumber <= this.from_KUCUN.kucunShangXian) {
          this.kuCunStatue = "正常"
        } else if (this.from_KUCUN.chengpinNumber < this.from_KUCUN.kucunXiaXian) {
          this.kuCunStatue = "紧张"
        } else if (this.from_KUCUN.chengpinNumber > this.from_KUCUN.kucunShangXian) {
          this.kuCunStatue = "积压"
        }
        this.table_RUKURECODE=this.from_KUCUN.logs
      })
    },
  },
//生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {
  },
//生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
    this.id = this.$route.query.id//解构写法
    this.type = this.$route.query.type;//解构写法
    this.title = this.type == 1 ? "成品库详情" : "废品库详情"
    this.getData(this.id, this.type);
  },
//生命周期 - 挂载之前",html模板未渲染
  beforeMount() {
  },
//生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
  },
//生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {
  },
//生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {
  },
//生命周期 - 销毁之前",
  beforeDestroy() {
  },
//生命周期 - 销毁完成",
  destroyed() {
  },
//如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {
  },
}
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.Newsupply {
  border-top: 1px solid transparent;
  animation: fade-in; /*动画名称*/
  animation-duration: 0.4s; /*动画持续时间*/
  -webkit-animation: fade-in 0.4s; /*针对webkit内核*/
}

.Newsupply .detPgHeader {
  border: 1px solid transparent;
  box-sizing: border-box;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  margin-bottom: 10px;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  /*初始状态 透明度为0*/
  40% {
    opacity: 0;
  }
  /*过渡状态 透明度为0*/
  100% {
    opacity: 1;
  }
  /*结束状态 透明度为1*/
}

@-webkit-keyframes fade-in { /*针对webkit内核*/
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.Newsupply .detPgHeader .side_1 {
  width: 5px;
  height: 16px;
  background-color: $Header_color;
  display: inline-block;
}

.Newsupply .detPgHeader .add_1 {
  margin-left: 5px;
  font-size: 18px;
  font-weight: 400;
}

.Newsupply .herd_tow_brgs {
  background-color: $white;
  margin: 0 20px 20px;
  overflow: hidden;
  border: 1px solid $bordercolor;
  border-radius: 5px;
}

.Newsupply .herd_tow_bt {
  height: 50px;
  border-bottom: 1px solid $bordercolor;
  margin-bottom: 20px;
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.Newsupply .Botm_PtnRpo {
  margin: 20px;
  text-align: center;
  padding: 20px;
  background: white
}
</style>
